/**
 * 查看培训计划
 */
<template>
   <div class="p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
                <el-form v-loading="loading" :model="formData" ref="formRef" label-width="120px" :scroll-to-error="true">
                    <vp-card>
                        <template #header>
                            <vp-label zh="基本信息" en="Basic Info" />
                        </template>
                        <el-row>
                            <vp-col :span="4">
                                <el-form-item>
                                    <template #label><vp-label zh="教员" en="Trainer" /></template>
                                    <el-link @click="handleViewPersonnelFile(formData.jydaid)">{{ formData.dabh + ' ' + formData.jyxm }}</el-link>
                                </el-form-item>
                            </vp-col>
                            <vp-col :span="4">
                                <el-form-item>
                                <template #label><vp-label zh="下发日期" en="Issue Date"/></template>
                                    <span>{{ (formData.xfsj || '').substring(0, 10) }}</span>
                                </el-form-item>
                            </vp-col>
                        </el-row>
                        <el-row>
                            <vp-col :span="1">
                                <el-form-item>
                                    <template #label><vp-label zh="涉及课程/说明" en="Course Desc"/></template>
                                    <el-link @click="handleViewTrainingPlan(formData.pxid)">
                                        {{ (formData.sjKsrq || '') + ' ' + (formData.kcmcZw || '') + ' ' + 
                                           (formData.kcmcYw || '') +  ' ' + (formData.pxbh || '') + ' ' + (formData.fbt || '')}}
                                    </el-link>
                                </el-form-item>
                            </vp-col>
                        </el-row>
                    </vp-card>
                    <vp-card>
                        <template #header>
                            <vp-label zh="评分项目" en="Scoring Items" />
                        </template>
                        <vp-vxe-table 
                            id="trainingTeacherEvalTable" 
                            :data="formData.items" 
                            :flexible="false" 
                            :max-height="450"
                            show-footer
                            :footer-method="footerMethod"
                            :merge-footer-items="mergeFooterItems"
                        >
                            <vxe-column field="seq" type="seq" align="center" title="#" width="50">
                                <template #footer>
                                    <div style="font-size: 16px;font-weight: bold;">总分</div>
                                </template>
                            </vxe-column>
                            <vxe-column field="xm" min-width="400">
                                <template #header><vp-label zh="评分项目" en="Scoring Items"/></template>
                            </vxe-column>
                            <vxe-column field="xmpjf" align="center" width="110" show-overflow>
                                <template #header><vp-label zh="项目平均分" en="Average Score"/></template>
                                <template #default="scope">
                                    <span>{{ getAverageScore(scope.row.xc) }}</span>
                                </template>
                                <template #footer>
                                    <div style="font-size: 16px;font-weight: bold;">{{ getTotalAverageScore() }}</div>
                                </template>
                            </vxe-column>
                            <vxe-column :field="rater.dabh" align="center" v-for="rater in formData.raters" width="80" show-overflow>
                                <template #header><vp-label :zh="rater.ryxm" :en="rater.dabh"/></template>
                                <template #default="scope">
                                    <span>{{ getScore(rater.raterItems, scope.row.xc) }}</span>
                                </template>
                                <template #footer>
                                    <div style="font-size: 16px;font-weight: bold;">{{ getRaterAverageScore(rater.raterItems) }}</div>
                                </template>
                            </vxe-column>
                        </vp-vxe-table>
                    </vp-card>
                </el-form>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <VpOperationRecordCard :id="props.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup name="viewTrainingTeacherEval">
import { onMounted, ref, nextTick, computed } from 'vue';
import request from '/@/utils/request';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import { useRouter } from 'vue-router';
import type { VxeTablePropTypes } from 'vxe-table'

const props= defineProps<{ 
    id: string,
}>();

const loading = ref(false);
const router = useRouter();

// 组件挂载后事件
onMounted(() => {
    loadForm();
})

const formData = ref({
    id:"",
    pxid:"",
    pxbh:"",
    kcid:"",
    kcbh: "",
    kcmcZw: "",
    kcmcYw: "",
    fbt:"",
    xfsj:"",
    jydaid:"",
    jyxm:"",
    dabh: "",
    sjKsrq:"",
    items: [] as any[],
    raters: [] as any[],
    raterItems: [] as any[],
});

// 加载数据
const loadForm = () => {
    loading.value = true;
    nextTick(() => {
        request.get(`/training/teacher/eval/${props.id}`).then((res)=>{
            formData.value = res.data;
            loading.value = false;
        })
    })
};

// 查看人员档案
const handleViewPersonnelFile = (id: string) => {
	router.push({
		name: "viewTrainingPersonnelFile",
		params: {
			id: id,
		},
	})
}

// 查看培训计划
const handleViewTrainingPlan = (id: string)=>{
	router.push({
		name: "viewTrainingPlan",
		params: {
			id: id,
		},
	})
}

// 获取学员某一项分数
const getScore = (raterItems:[], xc: number) => {
    const raterItem = (raterItems || []).find((item: any) => {return item.xc === xc}) as any;
    if (raterItem && raterItem.pf >= 0) {
        return raterItem.pf;
    } else {
        return '未评分';
    }
}

// 获取某一项的平均分
const getAverageScore = (xc: number) => {
    let allRaterItems = [] as any[];
    (formData.value.raters || []).forEach((rater: any) => {
        allRaterItems = allRaterItems.concat(rater.raterItems || []);
    })
    const raterItems = allRaterItems.filter(raterItem => {
        return raterItem.xc === xc && raterItem.pf >= 0;
    });
    if (raterItems.length === 0) {
        return '未评分';
    }
    let total = 0;
    raterItems.forEach(raterItem => {
        total += (raterItem.pf || 0);
    });
    return parseFloat((total/ raterItems.length).toFixed(2));
}

// 计算学员平均分
const getRaterAverageScore = (raterItems: any[]) => {
    let total = 0;
    let count = 0;
    (raterItems || []).forEach((item: any) => {
        if (item.pf >= 0) {
            total += item.pf;
            count ++;
        }
    })
    if (count === 0) {
        return '未评分';
    }
    return parseFloat((total/ count).toFixed(2));
}

// 计算总平均分
const getTotalAverageScore = () => {
    let total = 0;
    let count = 0;
    (formData.value.items || []).forEach((item: any) => {
        const score = getAverageScore(item.xc);
        if (typeof score === "number") {
            total += score;
            count ++;
        }
    })
    if (count === 0) {
        return '未评分';
    }
    return parseFloat((total/ count).toFixed(2));
}

// 表尾数据
const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns }) => {
    return [
        columns.map((column, index) => {
            return '-'
        })
    ]
}

// 表尾合并
const mergeFooterItems = ref([
    { row: 0, col: 0, rowspan: 1, colspan: 2 },
]);

</script>
<style scoped lang="scss">

</style>
